/**
 * Created by lxh on 2018/1/6.
 */

import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import constants from '../../../common/constants';
import {Select,Modal,message,Card,Input, Table, Alert, Badge,Button,Tooltip,Switch,Icon,Form } from 'antd';
import styles from './ShopManage.less';
import {routerRedux} from 'dva/router';
import moment from 'moment';
import {powerControl} from '../../../utils/powerControl';

const {Option} = Select;
const FormItem = Form.Item;
const AuthButton = powerControl(Button);

@connect(state => ({
    shopManage: state.shopManage,
}))
@Form.create()
export default class ShopSelectGoods extends PureComponent {
    state={
        id:'',
        goodsId:'',
        modalVisible:false,
        record:{},
        returnPath:'',
    }
    componentDidMount(){
        if(!this.props.location.state){
            this.props.dispatch(routerRedux.push('distributorManage/shopManage'))
        }
        this.setState({
            id:this.props.location.state,
            returnPath:this.props.location.returnPath
        })
        this.props.dispatch({
            type:'shopManage/queryAllGoods',
            payload:{id:this.props.location.state}
        })
    }
    handleAdd=(goodId,record)=>{
        console.log(record)
        this.handleModalVisible(true);
        this.setState({
            goodsId:goodId,
            record:record,
        })
    }
    handleModalVisible = (flag) => {
        this.setState({
            modalVisible:!!flag,
        });
    };
    handlesOk=()=>{
        const {id,goodsId}=this.state;
        this.props.form.validateFields((err,values)=>{
            if(!err){
                this.props.dispatch({
                    type:'shopManage/insertShopGoods',
                    payload:{...values,
                    id:id,
                    goods_id:goodsId},
                    callback:(response)=>{
                        if(response.result===0){
                            message.success("添加成功")
                            this.handleModalVisible(false);
                            this.props.dispatch({
                                type:'shopManage/queryAllGoods',
                                payload:{id:this.state.id}
                            })
                        }else{
                            message.error("添加失败")
                            this.handleModalVisible(true);
                        }
                    }
                })
            }
        })
    }
    handleTableChange=(pagination)=>{
        const {dispatch} = this.props;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
        };
        dispatch({
            type: 'shopManage/queryAllGoods',
            payload:params,
        });
    }
    handleEditGoodRow = (record, pagination) => {
        console.log("distributorrecord",record)
        const xiangou_date = [moment(record.xiangou_start_date, "YYYY-MM-DD HH:mm:ss"),moment(record.xiangou_end_date, "YYYY-MM-DD HH:mm:ss")];
        const promote_date = [moment(record.promote_start_date, "YYYY-MM-DD HH:mm:ss"),moment(record.promote_end_date, "YYYY-MM-DD HH:mm:ss")];
        const {dispatch} = this.props;
        dispatch({
            type: 'goodsManage/keepData',
            payload: {
                ...record,
                editType: 'mod',
                goods_id: record.goods_id,
                xiangou_date: xiangou_date,
                promote_date: promote_date,
                returnPath:'/distributorManage/shopSelectGoods',
                returnShopId:this.state.id,
                parentReturnPath:this.state.returnPath
            },
        });
        dispatch(routerRedux.push('/goods/addGoods'));
    }
    render() {
        const {allGoodsData:{list,pagination}}=this.props.shopManage;
        const {id,modalVisible,goodsId,record,returnPath}=this.state;
        const {getFieldDecorator }=this.props.form;
        const paginationProps={
            showQuickJumper:true,
            showSizeChanger:true,
            ...pagination,
        }
        const columns = [{
            title:'商品ID',
            dataIndex:'goods_id',
        },{
            title:'父商品ID',
            dataIndex:'parent_goods_id',
        },{
            title:'用户ID',
            dataIndex:'user_id',
        },{
            title:'商品的唯一货号',
            dataIndex:'goods_sn',
        },{
            title:'商品的名称',
            dataIndex:'goods_name',
        },{
            title:'商品点击数',
            dataIndex:'click_count',
        },{
            title:'商品库存数量',
            dataIndex:'goods_number',
        },{
            title:'商品的重量(kg)',
            dataIndex:'goods_weight',
        },{
            title:'市场售价',
            dataIndex:'market_price',
        },{
            title:'成本价',
            dataIndex:'cost_price',
        },{
            title:'供货价',
            dataIndex:'supply_price',
        },{
            title:'本店售价',
            dataIndex:'shop_price',
        },{
            title:'促销价格',
            dataIndex:'promote_price',
        },{
            title:'促销价格开始日期',
            dataIndex:'promote_start_date',
        },{
            title:'促销价格结束日期',
            dataIndex:'promote_end_date',
        },{
            title:'商品报警数量',
            dataIndex:'warn_number',
        },{
            title:'商品关键字',
            dataIndex:'keywords',
        },{
            title:'商品的简短描述',
            dataIndex:'goods_brief',
        },{
            title:'前台显示的微缩图片',
            dataIndex:'goods_thumb',
            render:(val,record)=>{
                return (
                    <Tooltip placement="right" title={record.goods_thumb}>
                        <img src={val} style={{width:50,height:50}}/>
                    </Tooltip>
                )
            }
        },{
            title:'商品的实际大小图片',
            dataIndex:'goods_img',
            render:(val,record)=>{
                return (
                    <Tooltip placement="right" title={record.goods_img}>
                        <img src={`${constants.imageUrlFix}${val}`} style={{width:50,height:50}}/>
                    </Tooltip>
                )
            }
        },{
            title:'是否实物',//1，是；0，否
            dataIndex:'is_real',
            render:(val)=>{
                return (<Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="close"/>} defaultChecked={val==1?true:false}/>)
            }
        },{
            title:'是否开放销售',//1，是；0，否'
            dataIndex:'is_on_sale',
            render:(val)=>{
                return (<Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="close"/>} defaultChecked={val==1?true:false}/>)
            }
        },{
            title:'是否单独销售',//1，是；0，否
            dataIndex:'is_alone_sale',
            render:(val)=>{
                return (<Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="close"/>} defaultChecked={val==1?true:false}/>)
            }
        },{
            title:'商品的添加时间',
            dataIndex:'add_times',
        },{
            title:'显示顺序',
            dataIndex:'sort_order',
        },{
            title:'是否删除',
            dataIndex:'is_delete',
            render:(val)=>{
                return (<Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="close"/>} defaultChecked={val==1?true:false}/>)
            }
        },{
            title:'是否精品',
            dataIndex:'is_best',
            render:(val)=>{
                return (<Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="close"/>} defaultChecked={val==1?true:false}/>)
            }
        },{
            title:'是否新品',
            dataIndex:'is_new',
            render:(val)=>{
                return (<Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="close"/>} defaultChecked={val==1?true:false}/>)
            }
        },{
            title:'是否热销',
            dataIndex:'is_hot',
            render:(val)=>{
                return (<Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="close"/>} defaultChecked={val==1?true:false}/>)
            }
        },{
            title:'是否特价促销',
            dataIndex:'is_promote',
            render:(val)=>{
                return (<Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="close"/>} defaultChecked={val==1?true:false}/>)
            }
        },{
            title:'商品所属类型id',
            dataIndex:'typeName',
        },{
            title:'商品的商家备注',
            dataIndex:'seller_note',
        },{
            title:'赠送的积分',
            dataIndex:'give_integral',
        },{
            title:'等级积分',
            dataIndex:'rank_integral',
        },{
            title:'是否限购',
            dataIndex:'is_xiangou',
            render:(val)=>{
                return (<Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="close"/>} defaultChecked={val==1?true:false}/>)
            }
        },{
            title:'限购开始时间',
            dataIndex:'xiangou_start_date',
        },{
            title:'限购结束时间',
            dataIndex:'xiangou_end_date',
        },{
            title:'限购设定数量',
            dataIndex:'xiangou_num',
        },{
            title:'商品标签',
            dataIndex:'goods_tag',
        },{
            title:'计量单位',
            dataIndex:'measure_unit',
        },{
            title:'所属商家',
            dataIndex:'from_seller_id',
        },{
            title: '操作',
            width:'220px',
            fixed:'right',
            render: (val, record) => (
                <p>
                    <AuthButton  href="javascript:" ghost  className={styles.btn} size="small"  auth="goodnew.goodnew" onClick={()=>this.handleAdd(record.goods_id,record)}>添加</AuthButton >
                    <span className={styles.splitLine}/>
                    <AuthButton  href="javascript:"ghost  className={styles.btn} size="small"  auth="goodnew.goodDetail"  onClick={()=>this.handleEditGoodRow(record,pagination)}>商品详情</AuthButton >
                </p>
            ),
        },];
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };
        return (
            <PageHeaderLayout title="添加商品">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div style={{margin:10,border:0,padding:0}}>
                            <Button type="default"><Link to={{pathname:'/distributorManage/shopAddGoods',state:id,returnPath:returnPath}}>返回</Link></Button>
                        </div>
                        <Table
                            columns={columns}
                            size="small"
                            dataSource={list}
                            scroll={{x:5000}}
                            pagination={paginationProps}
                            rowKey={record => record.goods_id}
                            onChange={this.handleTableChange}
                        />
                        <div>
                            <Modal
                                title="信息确认"
                                visible={modalVisible}
                                onOk={this.handlesOk}
                                onCancel={()=>{this.handleModalVisible(false)}}
                              >
                                <FormItem label="商品名称"   {...formItemLayout}>
                                    {(getFieldDecorator('goods_name',{
                                        initialValue:record.goods_name,
                                    }))(
                                        <Input placeholder="请输入销售价格" size="default"/>
                                    )}
                                </FormItem>
                                <FormItem   {...formItemLayout} label="商品编号">
                                    {(getFieldDecorator('goods_sn',{
                                        initialValue:record.goods_sn,
                                    }))(
                                        <Input placeholder="请输入销售价格"/>
                                    )}
                                </FormItem>
                                <FormItem label="供货价(￥)" {...formItemLayout}>
                                    {(getFieldDecorator('supply_price',{
                                        initialValue:record.supply_price,
                                        rules: [{
                                            required: true,
                                            message: '供货价不能为空'
                                        }],
                                    }))(
                                        <Input placeholder="请输入销售价格"/>
                                    )}
                                </FormItem>
                                <FormItem label="商品售价(￥)" {...formItemLayout}>
                                    {(getFieldDecorator('shop_price',{
                                        initialValue:record.shop_price,
                                        rules: [{
                                        required: true, message: '销售价格不能为空'
                                    }],
                                    }))(
                                        <Input placeholder="请输入销售价格"/>
                                    )}
                                </FormItem>
                            </Modal>
                        </div>
                    </div>
                </Card>
            </PageHeaderLayout>
        )
    }
}